 console.log(lrc)
 /**
  * 解析歌词字符串
  * 得到一个歌词对象的数组
  * 每个歌词对象：
  * {time:开始时间， words:歌词内容}
  */
function parseLrc(){
  lrc = lrc.split('\n')
  for(let i = 0;i<lrc.length;i++){
    let str = lrc[i];

    let obj = {
      time:str.split(']')[0].substring(1),
      words:str.split(']')[1],
    }
    obj.time = parseTime(obj.time)
    // let obj = {
    //   time:str.slice(1,str.indexOf(']')),
    //   words:str.slice(str.indexOf(']')+1,str.length),
    // }
    console.log(obj)
    lrc[i] = obj
  }
}
/**
 * 
 * @param {*} time //传入时间的字符串
 * @returns 时间计算的s
 */
function parseTime(time){
  num = +time.split(':')[0] * 60 + +time.split(':')[1]
  return num
}
parseLrc()
console.log(lrc)

let Doms = {
  liData: document.getElementsByTagName('li'),
  ul: document.querySelector('.lrc-list'),
  audio:document.querySelector('audio'),
  container:document.querySelector('.container')
}
/**
 * 计算出当前情况下 播放器播放到第几秒的情况
 * lrc的数组中 应该高亮歌词的下标
 */
function findIndex(){
  // let audio = document.querySelector('audio')
  console.dir(Doms.audio.currentTime)
 
    // console.log(e)
    console.dir(Doms.audio.currentTime)
   let index = lrc.length -1
    for(let i =0;i<lrc.length;i++){
      if(lrc[i].time > Doms.audio.currentTime){
        console.log(i)
        // liData[i].
        index = i - 1
        return index  ;
      }
    }
    return index - lrc.length

}
// console.log(findIndex())

function appendHtml(params)  {
  var flag = document.createDocumentFragment()
  for(let i = 0;i<lrc.length;i++){
      let li = document.createElement('li');
      li.textContent = lrc[i].words;
      flag.appendChild(li)
  }
  Doms.ul.appendChild(flag)
}
appendHtml()
/**
 * 容器高度
 */
var pyTop = 0
var containerHeight = Doms.container.clientHeight
var ulHeight = Doms.ul.clientHeight
var liheight  = Doms.liData[0].clientHeight
var containerTop = Doms.container.offsetTop
console.dir(Doms.container)
// 最大偏移量
var maxOffset = Doms.ul.clientHeight - containerHeight;
/**
 * 设置u元素的偏移量
 */
function setOffset(params) {
  let top = containerTop/2 + containerHeight/2
  let index = findIndex()
  if(index == -1)return
  let li = Doms.liData[index]
  let pyTop = 0
  console.dir( Doms.ul)
  // debugger
  
    pyTop = liheight * index + liheight - containerHeight/2
  if(pyTop > maxOffset){
    pyTop = maxOffset;
   
  }
  if (pyTop < 0) {
    pyTop = 0;
  }
  Doms.ul.style.transform = `translateY(-${pyTop}px)`;
  for(let i = 0;i< Doms.liData.length;i++){
    if(index != i){
      Doms.liData[i].className = ''
    }else{
      Doms.liData[i].className = 'active'
    }
  }
  // li.classList.remove('active');
  
  


}

 Doms.audio.addEventListener('timeupdate',function(e){
  // var y
  setOffset()
})